<template>
    <div class="iconList">
        <div class="iconItem" @click="$router.push('/recommended')">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tuijian"></use>
                </svg>
                <span>推荐新音乐</span>
        </div>
        <div class="iconItem">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-VIP"></use>
                </svg>
                <span>VIP专区</span>
        </div>
        <div class="iconItem" @click="$router.push('/allMusic')">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gedan"></use>
                </svg>
                <span>歌单</span>
        </div>
        <div class="iconItem" @click="$router.push('/singer')">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-paihangbang"></use>
                </svg>
                <span>歌手排行榜</span>
        </div>
    </div>
</template>
<style lang="less" scoped>
.iconList{
    width: 7.5rem;
    display: flex;
    justify-content: space-between;
    padding: 0.4rem;
    .iconItem{
        display: flex;
        flex-direction: column;
        align-items: center;
        span{
        font-size: 0.25rem;
        }
    }
    .icon{
        width: 1rem;
        height: 1rem;
    }

}
</style>
